<template>
    <div class="cmt-content">
       
      <!-- 发表评论 -->
    <h3>发表评论</h3>
    <textarea placeholder="只能评论120个字，....." v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="oneClick">点击发布</mt-button>
    <div  class="cmt-conent01">

       <div class="cmt-contnt02" v-for="(items,i) in comments" :key="i">
        
        <div class="cmt-contet03">第{{1+i}}楼&nbsp;&nbsp;用户：{{items.user_name}}&nbsp;&nbsp;
          发布时间:{{items.add_time| binia}}
          </div>
        <div class="cmt-conten04">
          {{items.content === "undefined"?"此用户为空":items.content}}
          </div>

       </div>




    </div>
     <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
   data(){
return{
pageindex:1,//默认展示第一页数据
comments:[],
msg:""//评论输入的内容
}
   },
   created(){
    this.getList()
   },
  methods: {
    
    getList(){
      this.$http.get("api/getcomments/"+this.newid+"?pageindex=" + this.pageindex ).then(
     result =>{
       if(result.body.status ===0){
        // this.comments=result.body.message
        //concat() 数据拼接方法
       this.comments=this.comments.concat(result.body.message)
       }else{
         alert('玩笑')
       }
       
     }
    )
    },
    getmore(){
      this.pageindex++;
      this.getList()
    },
    oneClick(){

      if (this.msg.trim().length === 0) {
        return Toast('提起吃啥')
     
     };
      this.$http.post("api/postcomment/"+ this.newid,{content:this.msg.trim()}).then(function(result) {
       if(result.body.status==0){
          var cm={
          user_name:"匿名用户",
          add_time:Date.now(),
          content:this.msg.trim()
          };
        
        this.comments.unshift(cm);
       this.msg="";
       }
      });
    },
  }, 
   
    // 数组接收
   props:["newid"],
    
};
</script>
<style lang="scss"scoped>

 .cmt-content{
   h3{
     font-size: 20px;
   }
   .cmt-conent01{
     .cmt-contnt02{
       font-size: 14px;
       .cmt-contet03{
         line-height: 30px;
         background:blueviolet;
         color: antiquewhite;
         text-indent: 1em;
         
       }
       .cmt-conten04{

      line-height: 30px;
      text-indent: 3em;



         }
     }
   }
 }



</style>
